<template>
	<view style="padding: 0 20px;">
		<!-- 表单 -->
		<u-form :model="form" ref="uForm" v-if="!showUserTable">
			<!-- 输入标题 -->
			<u-form-item label="标题:" ><u-input v-model="form.label" type="text" border="true" clearable/></u-form-item>
			<!-- 重要等级 -->
			<u-form-item label-width="150rpx" label="重要等级:">
				<u-radio-group v-model="form.radio">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.grade" :disabled="item.disabled">
						{{ item.grade }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- 选择用户 -->
			<u-form-item label-width="150rpx" label="选择用户:">
				<u-input v-model="form.users" @focus="showUserTable = true" border="true" clearable/>
			</u-form-item>
			<!-- 选择时间 -->
			<u-form-item label-width="150rpx" label="发布时间:">
				<u-picker v-model="show" mode="time" :params="params" @confirm = "confirm"></u-picker>
				<u-input v-model="form.time" @click="show = true" border="true" clearable/>
			</u-form-item>
			<!-- 输入内容 -->
			<u-form-item label="内容:" ><u-input v-model="form.content" type="textarea" border="true" height="200" auto-height="true" clearable="false"/></u-form-item>
			<!-- 确定取消按钮 -->
			<view class="yes-or-no">
				<!-- 取消 -->
				<u-button size="medium" @click="cancel">取消</u-button> 
				<!-- 确定 -->
				<u-button size="medium" type="success" @click="submit">确定</u-button> 
			</view>
		</u-form>
		<!-- 选择信息接收人列表 -->
		<view class="content" v-if="showUserTable" :style="{'height': phoneHeight + 'px' }">
			<view class="contentLeft">
				<view class="" style="text-align: center;">
					部门
				</view>
				<view class="departmentList">
					<scroll-view scroll-y="true" style="height:90%; margin-top: 20px;">
						<ly-tree
					 	:tree-data="departmentList" 
					 	node-key="title" 
					 	:props="defaultProps" 
					 	@node-click="handleNodeClick" 
					 />
					</scroll-view>
				</view>
					<u-button @click="showUserTable = false;">取消</u-button> 
			</view>
			<view class="contentRight">
				<view class="">
					用户姓名
				</view>
				<view class="usersList">
					<scroll-view scroll-y="true" style="height:90%; margin-top: 20px;">
						<u-checkbox-group @change="checkboxGroupChange" wrap="true">
							<u-checkbox 
								@change="checkboxChange" 
								v-model="item.checked" 
								v-for="(item, index) in userlist" :key="index" 
								:name="item.realname"
							>{{item.realname}}</u-checkbox>
						</u-checkbox-group>
					</scroll-view>
				</view>
					<u-button type="success" @click="showUserTable = false;">确定</u-button> 
			</view>
		</view>
		
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
		        LyTree
		    },
		data() {
			return {
					
				//默认重要等级
				form:{
					label:'',
					radio:'一般',
					users:'',
					time:'',
					content:''
				},
				//重要等级列表
				radioList: [
					{
						grade: '一般',
						disabled: false
					},
					{
						grade: '重要',
						disabled: false
					},
					{
						grade: '紧急',
						disabled: false
					}
				],
				//选择时间组件配置
				params:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				show: false,//选择时间组件是否显示
				showUserTable:false,//是否显示 信息接收人列表
				phoneHeight:'',//屏幕高度
				//部门列表
				departmentList: [{
					title: '重工开发部',
					children: []
				}, {
					title: '北京卓尔互动',
					children: [{
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				}, {
					title: '北京国炬软件',
					children: [{
						title: '市场部',
						children: [{
							title: '研发经理'
						}]
					}, {
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				},
				{
					title: '北京国炬软件',
					children: [{
						title: '市场部',
						children: [{
							title: '研发经理'
						}]
					}, {
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				},
				{
					title: '北京国炬软件',
					children: [{
						title: '市场部',
						children: [{
							title: '研发经理'
						}]
					}, {
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				},
				{
					title: '北京国炬软件',
					children: [{
						title: '市场部',
						children: [{
							title: '研发经理'
						}]
					}, {
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				},
				{
					title: '北京国炬软件',
					children: [{
						title: '市场部',
						children: [{
							title: '研发经理'
						}]
					}, {
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				},
				{
					title: '北京国炬软件',
					children: [{
						title: '市场部',
						children: [{
							title: '研发经理'
						}]
					}, {
						title: '研发部',
						children: []
					},
					{
						title: '财务部',
						children: []
					}]
				}],
				//部门列表配置
				defaultProps: {
					children: 'children',
					label: 'title'
				},
				//用户列表
				userlist: [
				{
					realname:'全选',
					checked: false,
					disabled: false
				},
				{
					realname: 'apple',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'orange',
					checked: false,
					disabled: false
				},
				{
					realname: 'banner',
					checked: false,
					disabled: false
				},
				{
					realname: 'sb',
					checked: false,
					disabled: false
				}
			]
			}
		},
		onReady() {
			//计算屏幕高度
			var _this = this;
			uni.getSystemInfo({
			    success(res) {
					_this.phoneHeight = res.windowHeight;
				}
			})
		},
		onLoad() {
			//调用默认时间转换函数
			this.getNowFormatDate ()
		},
		methods: {
			//取消发信息，返回上一页
			cancel(){
				uni.navigateBack({
				    delta: 1
				});
			},
			//发送消息,提交表单
			submit(){
				uni.navigateBack({
				    delta: 1
				});
				console.log(this.form)
			},
			//返回选中的值
			checkboxGroupChange(e) {
				console.log(e);
				if(e[0]=='全选'){
					e.splice(0,1)
				}
				this.form.users = e.join(" ")
			},
			//复选按钮事件
			checkboxChange(e) {
				if(e.name == '全选' && e.value == true){
					this.checkedAll()
				}else if(e.name == '全选' && e.value == false){
					this.nocheckedAll()
				}
			},
			//全选
			checkedAll() {
				this.userlist.map(val => {
					val.checked = true;
				})
			},
			//取消全选
			nocheckedAll() {
				this.userlist.map(val => {
					val.checked = false;
				})
			},
			//树形组件方法
			handleNodeClick(obj) {
				console.log('handleNodeClick', obj);
			},
			handleNodeExpand(obj) {
				console.log('handleNodeExpand', JSON.stringify(obj));
			},
			//选择发送时间
			confirm(time){
				console.log(time);
				this.form.time = time.year+"-"+time.month+"-"+time.day;
			},
			//设置默认时间和时间转换
			getNowFormatDate () {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear(); 
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				this.form.time = currentdate
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yes-or-no{
		margin-top: 30px;
		display: flex;
		justify-content: space-around;
	}
	.content {
		display: flex;
		width: 100%;
		padding:0px 0px 30px ;
		overflow: hidden;
	}
	.contentLeft{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
	}
	.contentRight{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 20px;
		height: 100%;
	}
	.departmentList{
		height: 90%;
		overflow: hidden;
	}
	.usersList{
		height: 90%;
		overflow: hidden;
	}
</style>